import React from 'react';
import './list.scss';
import GoodsImageCard from '../card/goodsImage';
import TradeInfoCard from '../card/tradeInfo';
import GoodsTitleCard from '../card/goodsTitle';
import BuyerInfoCard from '../card/buyerInfo';
import LogisticsInfoCard from '../card/logisticsInfo';

interface LogisticsListProps {
    // eslint-disable-next-line no-undef
    listData: LogisticsInfoListWithMemo[];
}
/** 物流列表 */
class LogisticsInfoList extends React.Component<LogisticsListProps> {
    constructor (props: any) {
        super(props);
    }
    /**
     * @function isEqualList 判断列表是否发生更新
     * @param {} newData 更新后数据
     * @param {} oldData 更新前数据
     * @returns {boolean}
     */
    isEqualList (newData, oldData) {
        // NOTE: 处理基础类型的值或是相同引用的值
        if (newData === oldData) {
            return true;
        }
        // NOTE: 如果是引用对象，提取key
        const keys1 = Object.keys(newData);
        const keys2 = Object.keys(oldData);

        // NOTE: 如果属性名数量不相等，则两个对象不相等
        if (keys1.length !== keys2.length) {
            return false;
        }

        for (const key of keys1) {
            // 递归调用 isEqual 进行深比较
            if (!this.isEqualList(newData[key], oldData[key])) {
                return false;
            }
        }

        return true;
    }
    /**
     * @function shouldComponentUpdate 判断是否需要更新list列表
     * @param {Readonly<LogisticsListProps>} nextProps 更新后的Props数据
     */
    shouldComponentUpdate (nextProps: Readonly<LogisticsListProps>): boolean {
        const { listData: newListData } = nextProps;
        const { listData } = this.props;
        const newLength = newListData.length;
        const listLength = listData.length;

        if (newLength !== listLength) {
            return true;
        }

        if (nextProps.listData.length === 0) return false;

        const isEqual = this.isEqualList(newListData, listData);
        return !isEqual;
    }
    /**
     * @function getLogisticsCardList 获取需要渲染的卡片列表
     */
    getLogisticsCardList () {
        const { listData } = this.props;
        return listData.map((val: LogisticsInfoListWithMemo, index: number) => {
            const { data, memo } = val;
            const { goodsImage, goodsInfo, buyerInfo, logisticsInfo, orderInfo } = data;

            return (<section className="info-item" key={index}>
                <main className='info-item-card-group'>
                    <GoodsImageCard url={goodsImage.picPath} context={goodsInfo.title} />
                    <TradeInfoCard {...orderInfo} />
                    <GoodsTitleCard {...goodsInfo} />
                    <BuyerInfoCard {...buyerInfo} />
                    <LogisticsInfoCard {...logisticsInfo}/>
                </main>
                {
                    memo.length < 2 ?  (<footer>卖家备注：<span>{memo[0]}</span></footer>)
                        : (
                            <footer>
                                {memo.map((str: string, index: number) => {
                                    const tid = orderInfo.tId.split(',')[index];
                                    return (<p key={`${tid}`}>卖家备注 {index + 1}: <span>{str}</span></p>);
                                })}
                            </footer>
                        )
                }
            </section>);
        });
    }

    render () {
        const { listData } = this.props;
        const listLength = listData.length;
        return (<section className="info-continer">
            {
                listLength ? this.getLogisticsCardList() : <div className='info-nothing'>暂无数据</div>
            }
        </section>);
    }
}

export default LogisticsInfoList;
